<!-- 用户地址管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {} }" searchConditionNum="4">
        <a-form-item class="table-search-item">
          <GzAppIdSelect v-model:value="searchData['appId']" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <GzTreeSelect v-model:value="searchData['agentNo3']" placeholder="归属区县" :showLevel="3" :isNeedDefault="false" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <GzTreeSelect v-model:value="searchData['agentNo4']" placeholder="归属网点" :showLevel="4" :isNeedDefault="false" />
        </a-form-item>
        <!-- <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['officialOpenId']" placeholder="公众号OPID" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['cstmName']" placeholder="姓名" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['phone']" placeholder="手机号" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-date-picker v-model:value="searchData['createdAt']" placeholder="创建时间" style="width: 100%;" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['cstmNo']" placeholder="实名状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">已实名</a-select-option>
            <a-select-option :value="0">未实名</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['agentNo4']" placeholder="网点机构号" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['agentNo3']" placeholder="区县机构号" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['oldAgentNo4']" placeholder="498归属" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['agentNo4']" placeholder="实际归属" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['addInLastWeek']" placeholder="是否周新增">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['addInCurrentMonth']" placeholder="是否月新增">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['addInCurrentYear']" placeholder="是否年新增">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-date-picker v-model:value="searchData['cstmTime']" placeholder="实名认证时间" style="width: 100%;" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['syncTime']" placeholder="是否迁移客户">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['authInLastWeek']" placeholder="是否周新增实名">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['authInCurrentMonth']" placeholder="是否月新增实名">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['authInCurrentYear']" placeholder="是否年新增实名">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-item> -->
      </GzSearchForm>
      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_DATA_REPORT_MEMBER_ALL_EXPT')" type="primary" :loading="vdata.exportBtnLoading" @click="exportDataReports">
            <ArrowUpOutlined />
            导出
          </a-button>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
</template>
<script lang="ts" setup>
  import { $getAllFansList, $exportAllFansList } from '@/api/dataReports/memberNotic/index'
  import { ref, reactive, getCurrentInstance } from 'vue'
  const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
  const infoTableRef = ref()
  const searchData: any = ref({})
  // 数据源
  const vdata = reactive({
    exportBtnLoading: false,  // 导出按钮loading
  })
  // 表头
  const tableColumns = reactive([
    { key: 'fansId', title: '客户ID', dataIndex: 'fansId', fixed: 'left', width: 80 },
    // { key: 'officialOpenId', title: '公众号OPID', dataIndex: 'officialOpenId', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'cstmName', title: '姓名', dataIndex: 'cstmName', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'phone', title: '手机号', dataIndex: 'phone', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'createdTime', title: '创建时间', dataIndex: 'createdTime', width: 220, minWidth: 220, maxWidth: 260 },
    { key: 'isAuth', title: '实名状态', dataIndex: 'isAuth', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'agentNo4', title: '网点机构号', dataIndex: 'agentNo4', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'agentName4', title: '网点机构名称', dataIndex: 'agentName4', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'agentNo3', title: '区县机构号', dataIndex: 'agentNo3', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'agentName3', title: '区县机构名称', dataIndex: 'agentName3', width: 150, minWidth: 150, maxWidth: 180 },
    // { key: 'agentNo4', title: '实际归属', dataIndex: 'agentNo4', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'addWeek', title: '会员周新增', dataIndex: 'addWeek', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'addMonth', title: '会员月新增', dataIndex: 'addMonth', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'addYear', title: '会员年新增', dataIndex: 'addYear', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'cstmNo', title: '实名认证唯一标识', dataIndex: 'cstmNo', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'cstmTime', title: '实名认证时间', dataIndex: 'cstmTime', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'isMemberSync', title: '是否迁移客户', dataIndex: 'isMemberSync', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'authWeek', title: '实名周新增', dataIndex: 'authWeek', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'authMonth', title: '实名月新增', dataIndex: 'authMonth', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'authYear', title: '实名年新增', dataIndex: 'authYear', width: 150, minWidth: 150, maxWidth: 180 }
  ])
  // 请求table接口数据
  function reqTableDataFunc(params: any) {
    return $getAllFansList(params)
  }
  // 导出数据
  async function exportDataReports() {
    try {
      vdata.exportBtnLoading = true
      await $exportAllFansList(searchData.value)
      $infoBox.message.success('导出成功，请到下载目录查看！')
    } finally {
      vdata.exportBtnLoading = false
    }
  }
  // 搜索
  function searchFunc() {
    infoTableRef.value.refTable(true)
  }
</script>